<template>

	<view class="content">

		<view class="content-top">
			<view class="content-title">
				<text>生产报工</text>
			</view>
			<hr>
			<u-form :model="formData" ref="formData" style="margin-top: 24rpx;" :rules="rules">
				<u-row gutter="100">
					<u-col span="5">
						<u-form-item :border-bottom="false" label="生产订单:" label-width='150rpx' prop="workorderCode">
							<u-input v-model="formData.workorderCode" disabled placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="发布工单:" label-width='150rpx' prop="releaseOrderCode">
							<u-input v-model="formData.releaseOrderCode" disabled placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="产品牌号:" prop="productName" label-width='150rpx'>
							<u-input :disabled="true" v-model="formData.productName" placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="生产批号:" prop="batchCode" label-width='150rpx'>
							<u-input :disabled="true" v-model="formData.batchCode" placeholder="" />
						</u-form-item>
					</u-col>

					<u-col span="5">
						<u-form-item :border-bottom="false" label="当前产线:" label-width='150rpx' prop="worklineName">
							<u-input v-model="formData.worklineName" disabled placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5"> <u-form-item :border-bottom="false" label=" " label-width='150rpx' prop="">
							<!-- <u-input v-model="" disabled placeholder="" /> -->
						</u-form-item> </u-col>
					<u-col span="5">
						<u-form-item :border-bottom="true" label="报工人:" label-width='150rpx' prop="feedbackName">
							<u-input v-model="formData.feedbackName" placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="true" label="报工数量:" label-width='170rpx' prop="quantityFeedback">
							<input v-model.number="formData.quantityFeedback" class="uni-input" type="number"
								placeholder="" />
						</u-form-item>
					</u-col>


					<u-col span="5">
						<u-form-item :border-bottom="true" label="包装:" label-width='150rpx' prop="pack">
							<!-- 	<u-input v-model="formData.pack" disabled placeholder="" />
							<u-icon slot="right" name="arrow-right" @click="showWrap=true" class="myicon"></u-icon>
							<u-select v-model="showWrap" :list="gznWrap" value-name="dictValue" label-name="dictLabel"
								class="custom-u-select" @confirm="wrapConfirm"></u-select> -->
							<u-radio-group v-model="formData.pack" size="50">
								<u-radio icon-size="50" label-size="30" v-for="(item, index) in gznWrap" :key="index"
									:name="item.dictValue">
									{{item.dictLabel}}
								</u-radio>
							</u-radio-group>

						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="true" label="标签:" label-width='150rpx' prop="label">
							<!-- 	<u-input v-model="formData.label" disabled placeholder="" />
							<u-icon slot="right" name="arrow-right" @click="showTabs=true" class="myicon"></u-icon>
							<u-select v-model="showTabs" :list="gznTabs" value-name="dictValue" label-name="dictLabel"
								@confirm="tabsConfirm"></u-select> -->
							<u-radio-group v-model="formData.label" size="50">
								<u-radio icon-size="50" label-size="30" v-for="(item, index) in gznTabs" :key="index"
									:name="item.dictValue">
									{{item.dictLabel}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-col>
					<!-- <u-col span="5">
						<u-form-item :border-bottom="true" label="不良品:" label-width='170rpx'
							prop="defectiveProductRecoverProductName">
							<u-input placeholder="" disabled v-model="formData.defectiveProductRecoverProductName"
								placeholder="请选择"></u-input>
							<u-icon slot="right" name="arrow-right" @click="selectDefectiveProduct"
								class="myicon"></u-icon>
						</u-form-item>
					</u-col> -->

					<u-col span="5">
						<u-form-item :border-bottom="true" label="不良品数量KG:" label-width='200rpx'
							prop="quantityUnquanlified">
							<input v-model.number="formData.quantityUnquanlified" class="uni-input"
								type="number" placeholder="" />
						</u-form-item>
					</u-col>
					<!-- 
					<u-col span="5">
						<u-form-item :border-bottom="true" label="混好的料:" label-width='200rpx' prop="mixedProductName">
							<u-input placeholder="" disabled v-model="formData.mixedProductName"
								placeholder="请选择"></u-input>
							<u-icon slot="right" name="arrow-right" @click="selectmixedProduct" class="myicon"></u-icon>
						</u-form-item>
					</u-col>

					<u-col span="5">
						<u-form-item :border-bottom="true" label="混好的料数量:" label-width='120px'
							prop="crushedMaterialQuantity">
							<input v-model.number="formData.mixedQuantity" class="uni-input" type="number"
								placeholder="" />

						</u-form-item>
					</u-col>

					

					<u-col span="5">
						<u-form-item :border-bottom="true" label="洗机料(回收):" label-width='200rpx'
							prop="recyclingScrapProductName">
							<u-input placeholder="" disabled v-model="formData.recyclingScrapProductName"
								placeholder="请选择"></u-input>
							<u-icon slot="right" name="arrow-right" @click="selectRecyclingScrap"
								class="myicon"></u-icon>
						</u-form-item>
					</u-col>

					<u-col span="5">
						<u-form-item :border-bottom="true" label="洗机料数量KG:" label-width='200rpx' prop="recyclingScrap">
							<input v-model.number="formData.recyclingScrap" class="uni-input" type="number"
								placeholder="" />
						</u-form-item>
					</u-col>

					<u-col span="5">
						<u-form-item :border-bottom="true" label="待回收料(机头机尾料、粉末、长条):" label-width='500rpx'
							prop="crushedMaterialProductName">
							<u-input placeholder="" disabled v-model="formData.crushedMaterialProductName"
								placeholder="请选择"></u-input>
							<u-icon slot="right" name="arrow-right" @click="selectCrushedMaterial"
								class="myicon"></u-icon>
						</u-form-item>
					</u-col>

					<u-col span="5">
						<u-form-item :border-bottom="true" label="待回收料数量KG:" label-width='130px'
							prop="crushedMaterialQuantity">
							<input v-model.number="formData.crushedMaterialQuantity" class="uni-input" type="number"
								placeholder="" />
						</u-form-item>
					</u-col> -->


				</u-row>
			</u-form>

		</view>
		<view class="content-bottom">
			<view class="tab-content" :style="data_index === 'params'? 'height:90%' : 'height:80%'  ">
				<view class="tabs">
					<!-- v-show="item.key !== 'queue' || data_queue" -->
					<view v-for="(item, index) in data_tabList"
						:class="['tabs-item', item.key === data_index ? 'active' : '']" :key="index"
						@click="data_index = item.key">
						{{ item.value }}
					</view>
				</view>
				<!--  -->
				<view class="tab-list" v-show="data_index === 'report'">

					<uni-table ref="table" :loading="loading" border stripe emptyText="暂无数据" style="width:100%;">
						<uni-tr>
							<uni-th align="center">生产批号</uni-th>
							<uni-th align="center">报工产线</uni-th>
							<uni-th align="center">包装</uni-th>
							<uni-th align="center">标签</uni-th>
							<uni-th align="center">报工人</uni-th>
							<uni-th align="center">报工时间</uni-th>
							<uni-th align="center">报工数量</uni-th>
						</uni-tr>
						<uni-tr v-for="(item,index) in itemList" :key="index">
							<uni-td align="center">{{ item.batchCode }}</uni-td>
							<uni-td align="center">{{ item.worklineName }}</uni-td>
							<uni-td align="center">{{ item.pack }}</uni-td>
							<uni-td align="center">{{ item.label }}</uni-td>
							<uni-td align="center">{{ item.feedbackName }}</uni-td>
							<uni-td align="center">{{ item.feedbackTime }}</uni-td>
							<uni-td align="center">{{item.quantityFeedback}}
								<!-- 	<view class="uni-group">
									<u-number-box v-model="formData.quantityFeedback" @change="valChange"
										:min='1'></u-number-box>
								</view> -->
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<view class="tab-list1" v-show="data_index === 'report' || data_index === 'queue'">
				<u-form :model="form1" ref="uForm">
					<u-form-item :border-bottom="false">
						<view style="display: flex; margin: 0 auto;">
							<u-button @click="submit" type="primary" size="medium"><u-icon
									name="arrow-upward"></u-icon>提交
							</u-button>
							<view style="width:20px">

							</view>
							<u-button @click="cancel" type="primary" size="medium"><u-icon name="close"></u-icon>取消
							</u-button>

						</view>
					</u-form-item>
				</u-form>
			</view>
			<u-toast ref="uToast" />
			<u-mask class="loadingBox" :show="uLoading" @click="uLoading = false" :mask-click-able="false">
				<u-loading class="uLoading" mode="circle" :show="uLoading" size="100"></u-loading>
			</u-mask>
		</view>
		<!-- 选择不良品 -->
		<u-popup v-model="showDefectiveProduct" mode="center" width="1000rpx" height="80%" border-radius="10"
			@close="close">
			<DefectiveProduct @close-popup="showDefectiveProduct=false" @selectValue="handleDefectiveProduct"
				:productType="productType">
			</DefectiveProduct>
		</u-popup>
		<!-- 确认报工 -->
		<u-popup style="z-index: 99;" v-model="modalshow" mode="center" width="30%" height="300rpx" border-radius="10"
			@close="close" @closePop="modalshow=false">
			<view style="width:100%;height: 100rpx;line-height: 150rpx;text-align: center;font-size: 50rpx;">是否确认报工？
			</view>
			<view style="margin-top: 50rpx;height: 100rpx;display: flex;">
				<u-button type="primary" style="width: 300rpx;margin-bottom: 10rpx;"
					@click="modalConfirm()">确定</u-button>
				<u-button type="primary" :plain="true" style="width: 300rpx;" @click="modalCancel()">取消</u-button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import DefectiveProduct from './DefectiveProduct.vue'
	export default {

		components: {
			DefectiveProduct
		},
		props: {
			workorder: null
		},
		data() {
			return {
				uLoading: false,
				type: 'textarea',
				border: true,
				height: 50,
				autoHeight: true,
				show: false,
				border: true,
				form1: {},
				value: '',
				data_index: "report",
				formData: {

				},
				data_list: [],
				loading: false,
				// tab栏
				data_tabList: [{
					value: "历史报工",
					key: "report",
				}, ],
				statusList: [],
				gznTabs: [],
				gznWrap: [],
				showWrap: false,
				showTabs: false,
				// 报工历史数据
				itemList: [],
				rules: {
					'pack': {
						type: 'string',
						required: true,
						message: '请选择包装',
						trigger: ['blur', 'change']
					},
					'label': {
						type: 'string',

						required: true,
						message: '请选择标签',
						trigger: ['blur', 'change']
					},
					'quantityFeedback': {
						type: 'number',

						required: true,
						message: '请填写报工数量',
						trigger: ['blur', 'change']
					},

					// 'defectiveProductQuantity': {
					// 	type: 'number',
					// 	required: true,
					// 	message: '请填写不合格品数量',
					// 	trigger: ['blur', 'change']
					// },
					'quantityUnquanlified': {
						type: 'number',

						required: true,
						message: '请填写不良品数量',
						trigger: ['blur', 'change']
					},
					'recyclingScrap': {
						type: 'number',

						required: true,
						message: '请填写洗机料数量',
						trigger: ['blur', 'change']
					},
					'crushedMaterialQuantity': {
						type: 'number',

						required: true,
						message: '请填写待回收料数量',
						trigger: ['blur', 'change']
					},
					'defectiveProductRecoverProductName': {
						type: 'string',

						required: true,
						message: '请填写不良品',
						trigger: ['blur', 'change']
					},
					'recyclingScrapProductName': {
						type: 'string',

						required: true,
						message: '请填写洗机料',
						trigger: ['blur', 'change']
					},
					'crushedMaterialProductName': {
						type: 'string',

						required: true,
						message: '请填写待回收料',
						trigger: ['blur', 'change']
					},
					feedbackName: {
						type: 'string',
						required: true,
						message: '请填写报工人',
						trigger: ['blur', 'change']
					}
				},
				// 产品弹框
				showDefectiveProduct: false,
				// 产品类型
				/* 
				 defectiveProduct	不良品
				 recyclingScrap		洗机料
				 crushedMaterial	待回收
				 */
				popuptype: 'defectiveProduct',
				productType: '',
				modalshow: false,
			};
		},
		onLoad(option) {

		},
		onShow(option) {

		},


		created() {
			this.aotuGetXiji()
			this.aotuGetHuishou()
			// 获取字典-标签
			this.$u.api.getDicts('gzn_tabs').then(res => {
				this.gznTabs = res.data;

			})
			// 获取字典-包装
			this.$u.api.getDicts('gzn_wrap').then(res => {
				this.gznWrap = res.data;
			})

			this.$u.api.getFeedbackByWorkorderId(this.workorder.workorderId).then(res => {
				this.itemList = res.data
			})

			this.formData = this.workorder;
			this.formData.mixedQuantity = 0;
			this.formData.quantityUnquanlified = 0;
			this.formData.recyclingScrap = 0;
			this.formData.crushedMaterialQuantity = 0;

			this.$forceUpdate()
		},
		mounted() {


		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.formData.setRules(this.rules)
		},
		methods: {
			// 确认报工
			modalConfirm() {

				this.uLoading = true
				this.$u.api.addfeedback(this.formData).then(res => {
					if (res.code == 200) {
						// 该订单的最后一条工单，请选择报工停产
						if (this.workorder && this.workorder.releaseOrderNumber == 1) {
							this.$u.api.stopProduct(this.workorder.releaseOrderId);

						}

						uni.showToast({
							title: '报工完成',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'none',
							//显示持续时间为 2秒
							duration: 3000
						})
						setTimeout(() => {
							this.cancel()
							this.$refs.formData.resetFields()
							this.$emit('tabsChange')
						}, 1000)
					} else {
						// this.$refs.uToast.show({
						// 	title: res.msg,
						// 	type: 'error',
						// })
						uni.showToast({
							title: res.msg,
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
					this.uLoading = false

				})
			},
			// 取消报工
			modalCancel() {
				this.modalshow = false;
			},
			// 自动获取洗机料和待回收料
			aotuGetXiji() {
				this.$u.api.listProduct({
					pageNum: 1,
					pageSize: 10,
					productType: '报废品',

				}).then(res => {
					console.log('洗机料', res)
					if (res.code == 200 && res.rows.length > 0) {
						this.formData.recyclingScrapProductName = res.rows[0].productName;
						this.formData.recyclingScrapProductId = res.rows[0].productId;
					} else {
						return uni.showToast({
							title: '主数据中还没有洗机料',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
			aotuGetHuishou() {
				this.$u.api.listProduct({
					pageNum: 1,
					pageSize: 10,
					productType: '回收品',

				}).then(res => {
					console.log('待回收料', res)
					if (res.code == 200 && res.rows.length > 0) {
						this.formData.crushedMaterialProductName = res.rows[0].productName;
						this.formData.crushedMaterialProductId = res.rows[0].productId;
					} else {
						return uni.showToast({
							title: '主数据中还没有待回收料',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					}

				})
			},

			// 取消提交
			cancel() {
				this.formData = {};
				this.itemList = []
				this.$emit("close-popup"); // 触发父组件的关闭事件
				this.$forceUpdate()
			},
			// 包装选择
			wrapConfirm(arr) {

				this.formData.pack = arr[0].value
			},
			// 标签选择
			tabsConfirm(arr) {

				this.formData.label = arr[0].value
			},
			submit() {

				if (!this.formData.pack || !this.formData.label || !this.formData
					.feedbackName || this.formData.pack ==
					'' || this.formData.label == '' || this.formData.quantityFeedback == undefined || this.formData
					.feedbackName ==
					'') {
					return uni.$u.toast('请检查包装，标签,报工数量和报工人是否填写')
				}

				this.$refs.formData.validate(valid => {
					if (valid) {
						this.modalshow = true;
						// this.uLoading = true
						// this.$u.api.addfeedback(this.formData).then(res => {
						// 	if (res.code == 200) {
						// 		// 该订单的最后一条工单，请选择报工停产
						// 		if (this.workorder && this.workorder.releaseOrderNumber == 1) {
						// 			this.$u.api.stopProduct(this.workorder.releaseOrderId);

						// 		}

						// 		uni.showToast({
						// 			title: '报工完成',
						// 			//将值设置为 success 或者直接不用写icon这个参数
						// 			icon: 'none',
						// 			//显示持续时间为 2秒
						// 			duration: 3000
						// 		})
						// 		setTimeout(() => {
						// 			this.cancel()
						// 			this.$refs.formData.resetFields()
						// 			this.$emit('tabsChange')
						// 		}, 1000)
						// 	} else {
						// 		// this.$refs.uToast.show({
						// 		// 	title: res.msg,
						// 		// 	type: 'error',
						// 		// })
						// 		uni.showToast({
						// 			title: res.msg,
						// 			//将值设置为 success 或者直接不用写icon这个参数
						// 			icon: 'none',
						// 			//显示持续时间为 2秒
						// 			duration: 2000
						// 		})
						// 	}
						// 	this.uLoading = false

						// })

					}
				})


			},
			valChange(value) {
				console.log('valChange', value)
			},

			// 获取当前日期的方法
			getProjectNum() {
				const projectTime = new Date(); // 当前中国标准时间
				const Year = projectTime.getFullYear(); // 获取当前年份 支持IE和火狐浏览器.
				const Month = projectTime.getMonth() + 1; // 获取中国区月份
				const Day = projectTime.getDate(); // 获取几号
				const hour = projectTime.getHours();
				const minute = projectTime.getMinutes();
				const second = projectTime.getSeconds();
				var CurrentDate = String(Year);
				if (Month >= 10) {
					// 判断月份和几号是否大于10或者小于10
					CurrentDate = CurrentDate + "-" + Month + "-";
				} else {
					CurrentDate = CurrentDate + "-" + "0" + Month + "-";
				}
				if (Day >= 10) {
					CurrentDate += Day + " ";
				} else {
					CurrentDate += "0" + Day + " ";
				}
				if (hour >= 10) {
					CurrentDate += hour + ":";
				} else {
					CurrentDate += "0" + hour + ":";
				}
				if (minute >= 10) {
					CurrentDate += minute + ":";
				} else {
					CurrentDate += "0" + minute + ":";
				}
				if (second >= 10) {
					CurrentDate += second;
				} else {
					CurrentDate += "0" + second;
				}
				return CurrentDate;
			},
			close() {
				this.showDefectiveProduct = false;
				this.modalshow = false;
			},
			// 选择不良品回调
			handleDefectiveProduct(value) {
				if (this.popuptype == 'defectiveProduct') {
					console.log('选择不良品回调', value)
					this.formData.defectiveProductRecoverProductName = value[0].productName;
					this.formData.defectiveProductRecoverProductId = value[0].productId;
				} else if (this.popuptype == 'recyclingScrap') {
					this.formData.recyclingScrapProductName = value[0].productName;
					this.formData.recyclingScrapProductId = value[0].productId;
					console.log('选择洗机料', value)
				} else if (this.popuptype == 'crushedMaterial') {
					this.formData.crushedMaterialProductName = value[0].productName;
					this.formData.crushedMaterialProductId = value[0].productId;
					console.log('选择待回收料', value)
				} else if (this.popuptype == 'mixedProduct') {
					this.formData.mixedProductName = value[0].productName;
					this.formData.mixedProductId = value[0].productId;
					console.log('选择待混好的料', value)
				}
			},
			// 选择不良品弹框
			selectDefectiveProduct() {
				this.popuptype = 'defectiveProduct';
				this.productType = '不良品';
				this.showDefectiveProduct = true;
			},
			// 选择洗机料
			selectRecyclingScrap() {
				this.popuptype = 'recyclingScrap';
				this.productType = '报废品';
				this.showDefectiveProduct = true;
			},
			// 选择待回收料
			selectCrushedMaterial() {
				this.productType = '回收品';
				this.popuptype = 'crushedMaterial';
				this.showDefectiveProduct = true;
			},
			// 选择混好的料
			selectmixedProduct() {
				this.productType = '半成品';
				this.popuptype = 'mixedProduct';
				this.showDefectiveProduct = true;
			}
		},
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.content-title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 600;
			margin: 10px;
		}

		.content-top {
			padding: 20rpx;
			height: 10%;
			width: 100%;
		}

		.content-bottom {
			display: flex;
			flex: 1;
			flex-direction: column;
			margin-top: 20rpx;
			padding: 30rpx;
		}

		.tab-content {
			width: 100%;
			position: relative;

			.tabs {
				display: flex;
				position: relative;
				color: rgb(70, 71, 72);
				border-bottom: 2rpx solid rgb(193, 193, 193);

				.tabs-item {
					margin-right: 80rpx;
					cursor: pointer;
					font-size: 32rpx;

					&.active {
						color: #2979ff;
						z-index: 9;

						&::after {
							content: "";
							bottom: -4rpx;
							left: 0;
							right: 0;
							height: 4rpx;
							background: #2979ff;
						}
					}
				}
			}

			.tab-list {
				display: flex;
				align-items: center;
				width: 100%;
				margin: 20rpx 0;
			}
		}

		.myicon {
			font-size: 50rpx;
			width: 100px;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f0f0f0;
			border-radius: 8px;
		}


	}
</style>